<template>
  <div ref="map"></div>
</template>

<script setup>
import { createScene } from "@/utils/geojsonUtil.js";
import { ref, onMounted } from "vue";
import * as THREE from "three";

const map = ref("");

const createEarth = (radius, imgUrl) => {
  const geometry = new THREE.SphereGeometry(radius, 32, 16);
  const textLoader = new THREE.TextureLoader();
  const textureMa = textLoader.load(imgUrl);
  const material = new THREE.MeshPhongMaterial({
    map: textureMa,
  });
  const mesh = new THREE.Mesh(geometry, material);
  return mesh;
};

onMounted(() => {
  const { scene, camera } = createScene(map.value);
  const earth = createEarth(100, "./earth.jpg");
  const earth_cloud = createEarth(102, "./earth_cloud.png");
  earth_cloud.material.transparent = true;
  scene.add(earth);
  scene.add(earth_cloud);
  scene.background = new THREE.TextureLoader().load("./bg_star.jpg");
  camera.position.z = 1000;
});
</script>

<style lang="less" scoped></style>
